<!doctype html>
<html class="no-js fixed-layout">
<head>
  <!-- 公共head Begin -->
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="keywords" content="萌宠之家-C2B2C社会化电商平台" />
  <meta name="description" content="《萌宠之家-C2B2C社会化电商平台》是一个基于宠物社区的一站式电商平台。" />
  <!-- minimum-scale=1.0, maximum-scale=1.0 不加这两个在iPhone浏览器下点击缩小了的输入框会使整个页面变大 -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
  <title>萌宠之家-C2B2C社会化电商平台</title>

  <!-- Set render engine for 360 browser -->
  <meta name="renderer" content="webkit">

  <!-- No Baidu Siteapp-->
  <meta http-equiv="Cache-Control" content="no-siteapp"/>

  <link rel="icon" type="image/png" href="statics/img/favicon.png">

  <!-- Add to homescreen for Chrome on Android -->
  <meta name="mobile-web-app-capable" content="yes">
  <link rel="icon" sizes="192x192" href="statics/img/app-icon72x72@2x.png">

  <!-- Add to homescreen for Safari on iOS -->
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name="apple-mobile-web-app-title" content="Pet Mall"/>
  <link rel="apple-touch-icon-precomposed" href="statics/img/app-icon72x72@2x.png">

  <!-- Tile icon for Win8 (144x144 + tile color) -->
  <meta name="msapplication-TileImage" content="statics/img/app-icon72x72@2x.png">
  <meta name="msapplication-TileColor" content="#0e90d2">

  <link rel="stylesheet" href="statics/AmazeUI/assets/css/amazeui.min.css">
  <link rel="stylesheet" href="statics/AmazeUI/assets/css/shop.css">

  <!--[if (gte IE 9)|!(IE)]><!-->
  <script src="statics/AmazeUI/assets/js/jquery.min.js"></script>
  <!--<![endif]-->
    <script src="statics/AmazeUI/assets/js/amazeui.min.js"></script>
    <script src="statics/AmazeUI/assets/js/amazeui.modal.js"></script>

  <script src="statics/js/plugin/jquery.cookie.js"></script>

  <!-- 此处form的导入和amazeui.min.js会有冲突，请根据需要使用 -->
  <script src="statics/js/plugin/jquery.form.js"></script>

  <script src="statics/AmazeUI/assets/js/validator.js"></script>
  <script src="statics/js/plugin/jquery.livequery.js"></script>
  <script src="statics/js/jquery.lSelect.js"></script>
  <script src="statics/js/plugin/jquery.metadata.js"></script>
  <script src="statics/js/product.js"></script>
  <!-- 公共head End -->
</head>
<body>
<div class="header">
  <div class="am-g am-text-center am-margin-top">
    <img src="statics/img/logo.png" />
    <h1>《萌宠之家》会员登录</h1>
  </div>
  <hr class="am-margin-top-0" />
</div>
<div class="am-g">
  <div class="am-u-lg-6 am-u-md-8 am-u-sm-centered">
    <form id="loginForm" class="validator-form am-form am-form-horizontal" callback="loginFormAjaxSubmit()" action="http://localhost:8080/user/login" method="post">
      <div class="am-form-group">
        <label for="username" class="am-u-sm-3 am-form-label">用户名</label>
        <div class="am-u-sm-9">
          <input type="text" name="username" id="username" placeholder="用户名/邮箱" data-validation-message="请输入正确的用户名" minlength="2" maxlength="20" pattern="^([0-9a-z_A-Z\u4e00-\u9fa5]+)$" required />
        </div>
      </div>

      <div class="am-form-group">
        <label for="passward" class="am-u-sm-3 am-form-label">密码</label>
        <div class="am-u-sm-9">
          <input type="password" name="password" id="passward" placeholder="密码" data-validation-message="请输入正确的密码" required />
        </div>
      </div>

      <div class="am-form-group">
        <div class="am-u-sm-offset-3 am-u-sm-9 am-text-xs">
          <a href="member_password_recover.html">忘记了密码? 点击找回!</a>
        </div>
      </div>

      <div class="am-form-group">
        <div class="am-u-sm-12 am-u-md-9 am-u-md-offset-3">
          <input type="hidden" name="role" value="1" />
          <button type="submit" class="am-btn am-btn-primary am-btn-block">登 录</button>
        </div>
      </div>
    </form>
  </div>
</div>
<!-- 弹出框 Begin -->
<div class="am-modal am-modal-alert" tabindex="-1" id="my-alert">
  <div class="am-modal-dialog">
    <div class="am-modal-hd">提示</div>
    <div class="am-modal-bd">
      <span id="lblMsg"></span>
    </div>
    <div class="am-modal-footer">
      <span class="am-modal-btn">确定</span>
    </div>
  </div>
</div>
<!-- 弹出框 End -->

<script>
    /** '登录表单' Ajax提交 **/
    function loginFormAjaxSubmit(){

        // '登录表单'提交
        $("#loginForm").ajaxSubmit({
            success:function(result){

                // 如果返回的数据的响应码不是'成功(200)'
                if(result.code != 200) {
                    $('#lblMsg').text(result.msg);
                    $('#my-alert').modal('open');
                    return;
                }

                // 如果返回的数据响应码为200
                let user = result.data;

                // 将返回的token信息存入到客户端session中
                sessionStorage.setItem( "token", result.token );
                // 将放回的用户信息存入到客户端session中
                sessionStorage.setItem( "user", JSON.stringify(user) );

                // 如果用户没有设置过'找回密码'的安全问题
                if( !user.question || user.question == '' ) {

                    Modal.confirm('登录成功！<br/><br/>为了您的账户安全，请尽快设置您的<a href="member_password_input.html">安全问题</a>！', {
                        closeViaDimmer: false,
                        onConfirm: function() {
                            top.location.href = 'member_center_index.html';
                        },
                        onCancel: function() {
                            top.location.href = 'member_center_index.html';
                        }
                    });// Modal.confirm();

                } else {
                    Modal.confirm('登录成功！', {
                        closeViaDimmer: false,
                        onConfirm: function() {
                            top.location.href = 'member_center_index.html';
                        },
                        onCancel: function() {
                            top.location.href = 'member_center_index.html';
                        }
                    });// Modal.confirm();
                }// if( !user.question || user.question == '' );

            }// success(result);
        });

    }// loginFormAjaxSubmit();
</script>
</body>
</html>